<template>
  <div :class="switchValue == '' ? 'home_dark' : 'home_' + switchValue">
    <div class="second-page">
      <!-- 列表 -->
      <div class="module-box serve-hotline-box">
        <div class="module-title">
          <p>知识库</p>
        </div>
        <div class="msg-content">
          <div class="msg-title">
            <p>{{detailsVal.TITLE}}</p>
            <p>来源：信息中心</p>
          </div>
          <div class="msg-val-box">
            <p v-html="detailsVal.CONTENT">
            </p>
          </div>
          <div class="chose-box">
            <p>您觉得这条知识有帮助吗？</p>
            <div class="bz-btn-box">
              <div
                :class="['bz-btn-item', avail == '是' ? 'cur-btn' : '']"
                @click="avail = '是'"
              >
                <span>
                  <img
                    src="@/assets/image/servePage/icon-ybz2.png"
                    alt=""
                    v-if="avail == '是'"
                  />
                  <img
                    src="@/assets/image/servePage/icon-ybz1.png"
                    alt=""
                    v-else
                  />
                </span>
                <p>有帮助</p>
              </div>
              <div
                :class="['bz-btn-item', avail == '否' ? 'cur-btn' : '']"
                @click="avail = '否'"
              >
                <span>
                  <img
                    src="@/assets/image/servePage/icon-mbz2.png"
                    alt=""
                    v-if="avail == '否'" />

                  <img
                    src="@/assets/image/servePage/icon-mbz1.png"
                    alt=""
                    v-else
                /></span>
                <p>没帮助</p>
              </div>
            </div>
            <div class="commit-box">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入您的意见建议"
                v-model="opinionVal"
                style="margin-bottom: 20px"
              >
              </el-input>
              <el-button type="primary" plain>提交</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery"; //引入jquery，否则document.getElementById为null
export default {
  props: {
    detailsVal: {
      type: Object,
      default: {
          CONTENT:'正文。。。',
          TITLE:'标题'
      },
    },
  },
  components: {},
  data() {
    return {
      switchValue: "dark",
      userId: localStorage.getItem("USER_ID"),
      opinionVal: "",
      avail: "是",
    };
  },
  methods: {
    // 获取用户主题
    getUserStyle() {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
          methodName: "getUserStyle",
          args: [this.userId],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            if (response.result == "1") {
              this.switchValue = "light";
            } else {
              this.switchValue = "dark";
            }
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {
    // 获取用户所选主题
    this.getUserStyle();
  },
  beforeMount() {},
  mounted() {
      console.log(this.detailsVal);
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="less" scoped>
@import "./css/light.less";
@import "./css/dark.less";

p {
  margin: 0;
  padding: 0;
}

.second-page {
  .module-box {
    background-color: #ffffff;
    padding: 20px 10px;
    margin-bottom: 24px;
    min-height: 400px;
    .module-title {
      font-size: 16px;
      color: #333333;
      border-bottom: 1px rgba(204, 204, 204, 0.4) solid;
      padding-left: 10px;

      p {
        display: inline-block;
        border-bottom: 2px rgba(170, 205, 244, 1) solid;
        padding: 5px 0;
        padding-bottom: 10px;
        font-weight: bold;
      }
    }
  }

  .msg-content {
    padding: 10px;

    .msg-title {
      padding: 10px 0;
      display: flex;

      p:first-of-type {
        font-size: 20px;
        font-weight: 500;
        color: #000000;
      }

      p:last-of-type {
        font-size: 16px;
        font-weight: 500;
        color: #828282;
        margin-left: 20px;
      }
    }

    .msg-val-box {
      padding-bottom: 30px;
    }

    .chose-box > p:first-of-type {
      text-align: center;
      color: rgba(79, 79, 79, 1);
      padding: 10px 0;
    }

    .bz-btn-box {
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bz-btn-item {
      display: flex;
      align-items: center;
      color: rgba(130, 130, 130, 1);
      font-size: 12px;
      padding: 5px 10px;
      border-radius: 5px;
      border: 1px #ccc solid;
      margin-right: 10px;
      cursor: pointer;
      background-color: rgba(229, 229, 229, 1);

      img {
        width: 17px;
        height: 15px;
      }

      p {
        margin-left: 10px;
      }
    }

    .bz-btn-item.cur-btn {
      background-color: rgba(64, 158, 255, 1);
      color: #ffffff;
    }

    .commit-box {
      text-align: center;
    }
  }
}
</style>